<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>登录</title>

<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">

<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp" />

  <link rel="apple-touch-icon-precomposed" href="${ctxPath}/assets/i/app-icon72x72@2x.png">

<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192"
	href="${ctxPath}/assets/i/app-icon72x72@2x.png">

<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="YeZi Guo" />
<link rel="apple-touch-icon-precomposed"
	href="${ctxPath}/assets/i/app-icon72x72@2x.png">

<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage"
	content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">

<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
  <link rel="canonical" href="http://www.example.com/">
  -->
<link rel="stylesheet" href="${ctxPath}/assets/css/amazeui.min.css">
<link rel="stylesheet" href="${ctxPath}/assets/css/app.css">
<style type="text/css">
html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	background-image: url("image/dl.png");
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	position: absolute;
	overflow: auto;
	margin: auto;
}
</style>
</head>
<body>
	<header>
		<!-- <div class="farme log-header">
			<h1>
				<a href="#">YeZi Guo</a>
			</h1>
		</div> -->
		<div class="farme log-re">
			<button type="button"
				class="am-btn am-btn-default am-radius log-button">注册</button>
		</div>
	</header>

	<div class="farme log">
		<div class="farme am-g">
			<div
				class="am-u-lg-3 am-u-md-6 am-u-sm-8 am-u-sm-centered log-content">
				<h1 class="log-title am-animation-slide-top">YeZi Guo</h1>
				<br>
				<div class="farme am-alert am-alert-danger" id="errorMsg"
				style="display: none;">
				<button type="button" class="am-close">&times;</button>
				<p></p>
			</div>
				<form class="am-form" id="log-form" method="post">
					<div class="farme am-input-group am-radius am-animation-slide-left">
						<input type="text" name="username" class="am-radius"
							data-validation-message="请输入正确的用户名"  placeholder="用户" minlength="2" maxlength="16" required />
						<span class="am-input-group-label log-icon am-radius"><i
							class="am-icon-user am-icon-sm am-icon-fw"></i></span>
					</div>
					<br>
					<div
						class="am-input-group am-animation-slide-left log-animation-delay">
						<input type="password" name="password" class="am-form-field am-radius log-input"
							placeholder="密码" minlength="3" maxlength="16" required> <span
							class="am-input-group-label log-icon am-radius"><i
							class="am-icon-lock am-icon-sm am-icon-fw"></i></span>
					</div>
					<br>
					<button type="button" id="btnLogin"
						class="am-btn am-btn-primary am-btn-block am-btn-lg am-radius am-animation-slide-bottom log-animation-delay">
						登录
						</button>
					<p class="am-animation-slide-bottom log-animation-delay">
						<a href="#">忘记密码?</a>
					</p>

				</form>
			</div>
		</div>
		<footer class="log-footer"> © 2017 
			YeZi Guo </footer>
	</div>



	<!--[if (gte IE 9)|!(IE)]><!-->
	<script src="${ctxPath}/assets/js/jquery.min.js"></script>
	<!--<![endif]-->
	<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
	<script src="${ctxPath}/assets/js/amazeui.min.js"></script>
	<script src="${ctxPath}/assets/js/app.js"></script>
	
	<script src="${ctxPath}/assets/js/jquery.form.min.js"></script>
	<script type="text/javascript">
		$(function() {
			
			//设置
			$("#btnLogin").click(function() {
				var $btn  = $(this);
				$btn.addClass("am-disabled");
				 
				 var isFormValid = $('#log-form').validator('isFormValid');
				if(!isFormValid)				
					return;
				 
				 $("#log-form").ajaxSubmit({
					 success : function(data) {
						 $btn.removeClass("am-disabled");
						if (data.errorCode != "0") {
							$('#errorMsg p').html(data.errorMsg);
							$('#errorMsg').alert();
							$('#errorMsg').show();
							//TODO 第二次不起作用(警告框)
							return;
						}
						//跳转页面
						location.href = "${ctxPath}${servletPath}";
					}
					 
				 });
			})
		})
	</script>
</body>
</html>